/** *通用形列表-列表部分 */
<template>
    <div v-if="tableObj?.tableIsShowEditButton" class="btn-padding-bottom">
        <el-button type="primary" :icon="Plus" :disabled="false" @click="addItem">新增</el-button>
        <el-button type="danger" :icon="Delete" :disabled="tableObj.tableData.length == 0" @click="delItem">
            删除
        </el-button>
    </div>
    <el-table
        ref="tableRef"
        :data="tableObj?.tableData"
        :border="tableObj.tableBorder ? tableObj.tableBorder : true"
        :stripe="tableObj.tableStripe ? tableObj.tableStripe : true"
        :fit="tableObj.tableFit ? tableObj.tableFit : true"
        :show-header="tableObj.tableShowHeader ? tableObj.tableShowHeader : true"
        :row-class-name="tableObj.tableRowClassName"
        :height="tableObj.tableHeight"
        :max-height="tableObj.tableMaxHeight"
        :highlight-current-row="tableObj.tableHighlightCurrentRow"
        :default-sort="tableObj.tableDefaultSort"
        :row-key="tableObj.tableRowKey"
        :default-expand-all="tableObj.tableDefaultExpandAll"
        :show-summary="tableObj.tableShowSummary"
        :summary-method="tableObj.tableSummaryMethod"
        :span-method="tableObj.tableSpanMethod"
        :table-layout="tableObj.tableLayout"
        class="my-table"
        @current-change="tableObj.tableCurrentChange"
        @row-dblclick="tableObj.tableRowDblclick"
        @selection-change="selectionChange"
    >
        <!-- <el-table-column 
            v-for="(item, index) in tableObj.tableColumn"
            :key="`${index}`"
            :prop="item.tableProp" 
            :label="item.tableLabel" 
            :width="item.tableWidth" 
            :show-overflow-tooltip="item.tableShowOverflowTooltip"
            :fixed="item.tableFixed"
        >
        </el-table-column> -->
        <GeneralTableListColumn v-model:tableObj="tableObj" v-model:tableColumn="tableObj.tableColumn" />
    </el-table>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue';
    import type { Ref, Raw } from 'vue';
    import {} from '@/apis';
    import { isPhone } from '@/utils';

    import { useRoute, useRouter } from 'vue-router';
    import { storeToRefs } from 'pinia';
    import { useStore } from '@/store';
    import { ElMessage } from 'element-plus';
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        CaretTop,
        CaretBottom,
        Plus,
        Delete,
    } from '@element-plus/icons-vue';
    import GeneralTableListColumn from './components/generalTableListColumn/GeneralTableListColumn.vue';
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const tableRef = ref(null);
    defineExpose({
        tableRef,
    });
    onMounted(() => {});
    const tableObj = defineModel<any>('tableObj', {
        required: false,
        default: {
            tableData: [],
            tableColumn: [],
        },
    });
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        tableSearch: [data: any];
    }>();
    const selection: Ref<any[]> = ref([]);
    const selectionChange = (val: any) => {
        console.log(val);
        selection.value = val;
        tableObj.value.tableSelectionChange(val);
    };
    const addItem = () => {
        let obj = {};
        tableObj.value.tableColumn.forEach((item: any) => {
            if (item.tableProp) {
                obj[item.tableProp] = item.tableContentDefaultValue ? item.tableContentDefaultValue : '';
            }
        });
        tableObj.value.tableData.push(obj);
    };
    const delItem = () => {
        // console.log(tableObj.value.tableData);
        // console.log(selection.value);
        selection.value.reduce((prev, cur, index, arr) => {
            console.log(prev);
            for (const idx in prev) {
                if (prev[idx] == cur) {
                    prev.splice(idx, 1);
                    return prev;
                }
            }
        }, tableObj.value.tableData);
    };
</script>

<style lang="scss" scoped>
    .my-table {
        width: 100%;
        flex: 1;
    }
    // tableRowClassName写的自定义样式
    .my-table :deep(.warning-row) {
        --el-table-tr-bg-color: var(--el-color-warning-light-9);
    }
    .my-table :deep(.success-row) {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
    .btn-padding-bottom {
        padding-bottom: 10px;
    }
</style>
